<template>
  <div id="words-box">
    <div class="words-item flex-item-center" v-for="(item,index) in words" :key="index" @click="click(item)">
      <span class="iconfont icon-sousuo"></span>
      <p class="words-text">{{item}}</p>
    </div>
  </div>

</template>

<script>
  export default {
    props: {
      words: {
        type: Array
      },
      keyword: {
        type: String,
        default: ' '
      },
      click: {
        type: Function,
        default: () => {}
      }
    },
    watch: {
      words() {
        this.$nextTick(() => {
          const wordsList = document.querySelectorAll('#words-box .words-text')
          const highlightwords = '<span style="color: #aaa;">'+this.keyword+'</span>'
          const reg = new RegExp(this.keyword, 'g')
          wordsList.forEach(item => {
            item.innerHTML = item.innerHTML.replace(reg, highlightwords)
          })
        })
      }
    },
  }
</script>

<style scoped="scoped">
  .words-item {
    padding: 10px 20px;
    font-size: 32px;
  }
  .icon-sousuo {
    font-size: 34px;
    margin-right: 20px;
  }
  .words-text {
    margin: 0;
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid #d3d3d3;
  }
</style>
